<template>
    <VCard title="我的收藏">
        <v-tabs class="mb-4" v-model="activeTab" color="primary">
            <v-tab v-for="(value,key) in tabs" :key="key" :value="value.tab">{{ value.title }}</v-tab>
        </v-tabs>
        <VWindow v-model="activeTab" class="mt-6 disable-tab-transition">
            <VWindowItem value="gallery">
                <VDataTableServer :loading="tableLoading" v-model:items-per-page="queryParams.pageSize" v-model:model-value="selectedRows" v-model:page="queryParams.pageNum" v-model="selected" :items="data" item-value="id" :items-length="total" :headers="headers">
                    <template v-slot:headers="{ allSelected, someSelected, selectAll }">
                    </template>
                    <template v-slot:body="{ items }">
                        <v-empty-state v-if="!items.length"
                            icon="tabler-search"
                            headline="暂无数据"
                            title="这里还没有任何记录"
                        ></v-empty-state>
                        <v-responsive
                            class="overflow-y-hidden overflow-x-hidden"

                        >
                        <VRow>
                        <VCol v-for="item in items">
                          <v-badge class="cursor-pointer" 
                            color="#ffffff" offset-x="20" offset-y="20">
                            <template v-slot:badge>
                              <v-hover>
                                <template v-slot:default="{ isHovering, props }">
                                    <VIcon v-bind="props" :icon="(isHovering|| item.collect)?'tabler-heart-filled':'tabler-heart'" 
                                    @click="handleCollect(item)" />
                                  </template>
                                </v-hover>
                            </template>
                              <VCard
                              width="250"
                              height="250"
                              @click="goDetail(item)">
                                <v-lazy @update:modelValue="loadElementImg(item, 'mall')">
                                  <VImg
                                  aspect-ratio="1"
                                  :src="item.src"
                                  cover
                                />
                                </v-lazy>
                              </VCard>
                            </v-badge>
                        <v-tooltip :text="item.title">
                          <template v-slot:activator="{ props }">
                            <VCardTitle v-bind="props" style="text-overflow: ellipsis;overflow:hidden;width: 250px;">{{ item.title }}</VCardTitle>
                          </template>
                        </v-tooltip>
                        <VCardSubtitle>by {{ item.authorName }}</VCardSubtitle>
                        </VCol>
                        </VRow>
                    </v-responsive>
                    </template>
                    <!-- pagination -->
                    <template #bottom>
                        <TablePagination v-model:page="queryParams.pageNum" v-model:items-per-page="queryParams.pageSize" :total-items="total" @update:page="getList" @update:items-per-page="getList" />
                    </template>
                    </VDataTableServer>
            </VWindowItem>
            <VWindowItem value="author">

            </VWindowItem>
        </VWindow>
    </VCard>




</template>


<script setup>
import * as Utils from "@/utils/index";
import { listCollectGallery,collectGallery,cancelCollectGallery } from "@/api/gallery";
import { useRouter } from "vue-router";

const router = useRouter()

const { proxy } = getCurrentInstance();

const activeTab = ref('gallery')

const tabs = [
    {tab: 'gallery',title: '素材'},
    {tab: 'author',title: '作者'},
]

const queryFormRef = ref()

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  isAsc: 'desc',
  orderByColumn: 'createTime',
  sortType:1
});

async function loadElementImg(item, type) {
  Utils.loadElementImg(item, type)
}

const goDetail = (item) => {
  router.push(`/gallery-center/detail/${item.id}`)
}

const handleReset = () => {
  queryFormRef.value.reset()
  // dateTimePicker.value.onClear()
  handleSearch()
}


const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
}

const handleCollect = async (item) => {
  if (item.collect) {
    await cancelCollectGallery({
      galleryIds: [item.id]
    })
    item.collect = false
    proxy.$toast.success('取消收藏成功')
  } else {
    await collectGallery({
      galleryId: item.id
    })
    item.collect = true
    proxy.$toast.success('收藏成功')
  }
  getList()
}



// Data table options
const total = ref(0);
const data = ref([]);
const tableLoading = ref(false);
// Headers
const headers = [
  {
    title: "素材商品",
    key: "galleryInfo",
    sortable: false,
  }
];


function getList() {
  tableLoading.value = true;
  listCollectGallery(queryParams.value).then((res) => {
    data.value = res.rows;
    total.value = res.total;
    tableLoading.value = false;
  });
}
getList();

</script>